<template>
	<!--未绑定手机号码组件-->
	<div class="fillInPhoneBox">
		<ul>
			<li class="select-state">
				<span >国家和地区</span>
				<span class="fillInPhone-arrow"  ></span>
				<span class="change-satate">中国大陆</span>
			</li>
			<li class="select-state">
				手机号： <span>+86</span> <input id="wode_xinshoujihao" class="input-phone" type="tel"  value=""  placeholder="请输入新手机号" v-model.number="fillPhoneInput" />
			</li>
			<li class="select-state">
				<span class="select-state-yz">验证码：</span><input id="wode_yanzhengma" class="inputCode" type="tel" placeholder="请输入验证码" v-model.number="fillPhoneInputCode" />
				<div :class="[authcodeClass]" @click="clickGetCode">
					{{authcodetext}}
				</div>
			</li>
		</ul>
		<p  v-if="isShow"   class="tip">{{inputTipText}}</p>
		<div :class="[submitBtnClass]"  @click="clickSumbitBtn">
			确定
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				fillPhoneInput:"", //手机号码
				fillPhoneInputCode:"",//验证码
				authcodetext:"获取验证码",
				authcodeClass:"authcode",
				time_s:"",
				clearTime:"",
				flag:true,
				inputTip:"",
				isShow:false,
				inputTipText:"验证码错误，请重新输入。",
				footerBtn:false,
				setservice:"uesrInfoservice",
				ruflase:false,
				submitBtnClass:"submit-btn",
			}
		},
		created:function () {
			this.$store.dispatch("hideNav")
		},
		watch:{
			fillPhoneInputCode(){
				if(! this.fillPhoneInputCode){
					this.submitBtnClass ="submit-btn"
				}else{
					this.submitBtnClass ="submit-btn1"
				}
			}
		},
		methods:{
			clickGetCode(){
				if(this.fillPhoneInput && this.flag){//不等于空
					this.time_s ="20"
					this.isShow = false
					this.flag = false
					this.authcodetext = "重新发送  "+this.time_s
					this.authcodeClass ="authcode1"
		            this.clearTime = setInterval(this.setTime,1000)
		            this.getPhoneCode()
				}
				if(!this.fillPhoneInput){
					this.isShow = true
					this.inputTipText ="请输入手机号码"
				}
			},
			//倒计时
			setTime:function(){
				this.time_s--
				//console.log(this.time_s)
				this.authcodetext = "重新发送  "+this.time_s
				if(this.time_s < 1){
					clearInterval(this.clearTime)
					this.flag = true
					this.authcodeClass ="authcode"
					this.authcodetext ="获取验证码"
				}
			},
			//获取手机验证码
			getPhoneCode(){
				this.$http.get("/sms/verifyCodeSms?mobile="+this.fillPhoneInput+"&service="+ this.setservice ).then(res => {
					//console.log(res.data.code)
		          if (res.data.code == "000000") {//成功
	                      this.ruflase = true
		          } else {

		          }
		        })
		        .catch(response => {

		        });
			},
			//绑定手机按钮
			clickSumbitBtn(){
				if( !this.fillPhoneInput || !this.fillPhoneInputCode){
					this.inputTipText ="请输入完整信息"
					this.isShow = true
				}else{
					if(this.ruflase){
						this.setBingPhone()
					}
				}
			},
			//绑定手机
			setBingPhone(){
				 let params = {
				   'mobile':this.fillPhoneInput,
           'code':this.fillPhoneInputCode,
           'service':this.setservice
				 };
                  this.$http.post('/user/bindMobile',this.$qs.stringify(params)).then(
                    res => {
                    	if(res.data.code=="000005"){
                    		this.inputTipText ="短信验证码不正确"
					        this.isShow = true
					        this.fillPhoneInputCode = ""
                    	}else if(res.data.code=="000000"){
                    		this.inputTipText ="绑定成功"
					        this.isShow = true
					        //this.fillPhoneInputCode = ""
					        setTimeout(this.linkMinePage,1500)
                    	}
                       //console.log(res.data.code)
                    },
                    err => {
                      console.log(err)
                    }
                  )
			},
			linkMinePage(){
				this.$router.push(`/${this.$channel}/personalInfo`)
			}
		}
	}
</script>

<style scoped="scoped">
	.fillInPhoneBox ul{
		width: 90%;
		height: auto;
		margin: 0 auto;
		font-size: 32px;
		color: #0C0C0C;

	}
	.fillInPhoneBox ul li{
		width: 100%;
		height: 120px;
		/*background: pink;*/
		border-bottom: 1px solid  #C5C5C5;
	}
	.fillInPhone-arrow{
		width: 40px;
		height: 40px;
		border: 4px solid #DCDCDC;
		display: inline-block;
		float: right;
		transform: rotate(45deg);
		margin: 40px 40px 0 0 ;
		border-bottom: none;
		border-left: none;
	}
	.select-state{
		line-height: 120px;
	}
	.change-satate{
		float: right;
	}
	.input-phone{
		width: 450px;
		height: 118px;
		float: right;
		outline: none;
		border: none;
		background: white;
	}
	.inputCode{
		width: 200px;
		height: 118px;
		/*background: pink;*/
		outline: none;
		border: none;
		float: left;
		background: white;
	}
	.authcode{
		display:inline-block;
		width:300px;
		height:61px;
		background:rgba(220,220,220,1);
		background: #CC3538;
		color: white;
		border-radius:15px;
		float: right;
		margin: 32px 20px  0 0 ;
		text-align: center;
		line-height: 61px;
	}
	.authcode1{
		display:inline-block;
		width:300px;
		height:61px;
		background:rgba(220,220,220,1);
		color: blcak;
		border-radius:15px;
		float: right;
		margin: 32px 20px  0 0 ;
		text-align: center;
		line-height: 61px;
	}
	.select-state-yz{
		float: left;
		margin-top: 2px;
	}
	input::-webkit-input-placeholder {
        color: #B2B2B2;
        font-size: 30px;
        text-align: left;
    }
  .tip{
  	width: 750px;
  	text-align: center;
  	color:#CC3538 ;
  	margin-top: 50px;
  }
  .submit-btn1{
  	width:650px;
	height:80px;
	background:rgba(204,53,56,1);
	border-radius:15px;
	margin: 50px auto;
	color: white;
	text-align: center;
	line-height: 80px;
	font-size: 36px;
	position: absolute;
	top: 450px;
	left: 50px;
  }
   .submit-btn{
  	width:650px;
	height:80px;
	background: rgb(227, 167, 168);
	border-radius:15px;
	margin: 50px auto;
	color: white;
	text-align: center;
	line-height: 80px;
	font-size: 36px;
	position: absolute;
	top: 450px;
	left: 50px;
  }
</style>
